<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../dist/umd/petit-vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id='app' class="wrap container" style="color: red;background: blue;">
      <div>{{arr}}</div>
      hello<p>world {{ name }}</p>
      <span>{{ age }}</span>
      <span>----{{ height.height }}</span>
      <ul>
        <li class="first-li" style="color: green;">aaa</li>
        <li>bbb</li>
      </ul>
    </div>
    <script>
      let vm = new Vue({
        el: "#app",
        data() {
          return {
            arr: [1, 2, 3],
            city:[{name: '北京'}],
            provice:{name:'河北'},
            name: "jack",
            age: 22,
            height: {height: 180}
          };
        },
        beforeCreate() {
          console.log('beforeCreate---index', this.age);
        },
        created() {
          console.log('created---index', this.age);
        },
        beforeMount() {
          console.log('beforeMount---index', this.$el);
        },
        mounted() {
          console.log('mounted---index', this.$el);
        },
        computed() {},
        watch() {}
      });

      vm.arr.push(4)
      vm.arr.push(5)
      vm.arr.push(9)
      // vm.arr[0][0].push(4,5,6)        // 依赖收集
      // vm._update(vm._render()) // 手动更新视图


      vm.$nextTick(() => {
        console.log('--------nextTick---------',vm.$el.innerHTML)
      });

      // with(vm._data) {
      //    console.log(name)
      // }
    </script>
  </body>
</html>
